<template>
	<view>
		<view class="bg">
			<u-swiper
						:list="detail?.picListV2?.split('|') || []"
						@change="handleSwiperChange"
						@click="handleEdit"
						:current="current"
						:height="774"
			:interval="5000"
					></u-swiper>
			<view class="user-info-box">
				<view class="thunmb-image">
					<tui-image-group border-width="4rpx" border-color="#fff" radius="16rpx" width="76rpx" height="76rpx" :distance="14" :imageList="imageList"></tui-image-group>
					<view class="icon-plus">
						<tui-icon name="plus" size="40rpx" color="#B3B3B3"></tui-icon>
					</view>
				</view>
				<view class="image-thunmbs">
					<image class="active" v-for="(img, index) in (detail?.picListV2?.split('|') || [])" :key="index" :src="img" @click="handleImgClick(index)"></image>
				</view>
				<view class="user-info">
					<view class="info-top">
						<view class="header-image">
							<view class="img">
								<tui-image-group width="136rpx" height="136rpx" :distance="14" :imageList="detail?.picListV2?.split('|') || []"></tui-image-group>
							</view>
						</view>
						<view class="info-top-right">
							<view class="info-name">
								<view class="name">
									古兮云悻
								</view>
								<view class="setting">
									<view class="setting-icon">
										<tui-icon name="setup" size="28rpx" color="#3D3D3D"></tui-icon>
									</view>
									<view class="setting-txt">
										设置
									</view>
								</view>
								
							</view>
							<view class="info-list">
								<view class="list-item">
									关注<text class="num">{{detail?.attentionCount}}</text>
								</view>
								<view class="list-item">
									粉丝<text class="num">{{detail?.followCount}}</text>
								</view>
								<view class="list-item">
									活动<text class="num">12</text>
								</view>
							</view>
						</view>
					</view>
					<view class="info-bottom">
						<view class="info-tag padding">
							<u-image class="tag-img" width="142rpx" height="36rpx" src=""></u-image>
						</view>
						<view class="info-bottom-item ">
							<view class="item-content padding">
								<u-image class="icon-img" width="20rpx" height="20rpx" src="/static/my/calendar.png"></u-image>
								506天
							</view>
							
						</view>
						<view class="info-bottom-item flex-1 ">
							<view class="item-content padding">
								钱包
							</view>
							
						</view>
						<view class="info-bottom-item ">
							
							<view class="item-content padding">
								门票卡
							</view>
						</view>
						<view class="info-bottom-item ">
							<view class="item-content padding">
								以指尖的旋律，诠释不羁的灵魂。
								<tui-icon name="plus" size="24rpx"></tui-icon>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="info-container">
			<view class="info-list">
				<view class="grid-item">
					<view class="item-content">
						<view class="grid-txt">
							我的动态<text class="grid-num">36</text>
						</view>
						<view class="grid-btn">
							<view class="btn-txt btn-bg1">
								发动态
							</view>
						</view>
					</view>
				</view>
				<view class="grid-item">
					<view class="item-content">
						<view class="grid-txt">
							我的战队<text class="grid-num">36</text>
						</view>
						<view class="grid-btn">
							<view class="btn-txt btn-bg2">
								查看
							</view>
						</view>
					</view>
				</view>
				<view class="grid-item">
					<view class="item-content">
						<view class="grid-txt">
							我的俱乐部<text class="grid-num">36</text>
						</view>
						<view class="grid-btn">
							<view class="btn-txt btn-bg3">
								查看
							</view>
						</view>
					</view>
				</view>
					
			</view>
			
			<view class="club-box">
				<view class="club-btn">
					<view class="club-txt">
						创建我的俱乐部
					</view>
					<view class="club-btn-txt">
						快速创建
					</view>
				</view>
			</view>
			<view class="club-detail">
				<view class="club-header">
					<view class="club-title">
						他的俱乐部
					</view>
					<view class="club-txt">
						俱乐部主页
					</view>
					<view class="club-btn-icon">
						<tui-icon name="arrowright" size="24rpx" color="#878787"></tui-icon>
					</view>
				</view>
				<view class="club-info">
					<view class="club-img">
						<u-image shape="circle" width="80rpx" height="80rpx" src=""></u-image>
					</view>
					<view class="club-content">
						<view class="name">
							Teamn筑梦俱乐部
						</view>
						<view class="tips">
							6场进行中的活动｜3699人来玩过
						</view>
					</view>
					
				</view>
				<view class="club-bottom">
					<view class="club-tip-txt">
						学生组·第三场电竞LPL国际锦标赛正在进…
					</view>
					<view class="club-bottom-btn">
						<view class="club-bottom-btn-txt">
							去上车
						</view>
					</view>
				</view>
			</view>
			<view class="teach">
				<view class="teach-title">
					赚钱教程
				</view>
				<view class="teach-tips">
					发活动、俱乐部、帮组队更多赚钱机会等你
				</view>
			</view>
			
			<view class="info-box">
				<text class="info-name" :class="detail.vipOrNot? 'vip' : ''">{{detail?.nickname}}</text>
				<image v-if="detail.vipOrNot" class="community-tag" src="https://static.wddzq.com/static/V3/aiwanxiaofendui.png" />
        <!-- <image v-if="detail.gender === 1" class="active-image-sex" src="https://static.wddzq.com/static/nan.png"></image> -->
				<!-- <image v-if="detail.gender === 2" class="active-image-sex" src="https://static.wddzq.com/static/nv.png"></image> -->
        <view class="info-right" @click="handleEdit">
					<text>编辑资料</text>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="info-data">
				<view class="info-data-item" @click="handleAttendClick">
					<text class="info-data-number">{{detail?.attentionCount}}</text>
					<text class="info-data-text">关注</text>
				</view>
				<view class="info-data-item" @click="handleFansClick">
					<text class="info-data-number">{{detail?.followCount}}</text>
					<text class="info-data-text">粉丝</text>
				</view>
				<view class="info-data-item">
					<text class="info-data-number">{{detail?.goodCount}}</text>
					<text class="info-data-text">点赞</text>
				</view>
			</view>
			<view class="info-auth" @click="handleNavigateAuth">
				<view v-if="detail.gender === 1" style="display: flex;align-items: center;justify-content: center;padding: 0 12rpx;height:36rpx;border-radius: 18rpx;background: #E7F1FF;border-radius: 18rpx;margin-right: 26rpx;">
					<image style="background-color: #E5F1FF;" src="https://static.wddzq.com/static/nan.png"></image>
					<text v-if="detail.age" style="color: #2A79D1;font-size: 24rpx;">{{detail.age}}岁</text>
				</view>
				<view v-if="detail.gender === 2" style="display: flex;align-items: center;justify-content: center;padding: 0 12rpx;height: 36rpx;border-radius: 18rpx;background: #E7F1FF;border-radius: 18rpx;margin-right: 26rpx;">
					<image style="background-color: #FFB3AE;" src="https://static.wddzq.com/static/nv.png"></image>
					<text v-if="detail.age" style="color: #FF6565;font-size: 24rpx;">{{detail.age}}岁</text>
				</view>
				
				<image v-if="detail?.authenticationType === 1" src="https://static.wddzq.com/static/gerenrenzheng-big.png"></image>
				<image v-else-if="detail?.authenticationType === 2" src="https://static.wddzq.com/static/juleburenzheng-big.png"></image>
				<image v-else src="https://static.wddzq.com/static/huiyuan-moren.png"></image>
        <text>{{ detail?.authenticationType === 1 ? detail.authenticationJobName : (detail?.authenticationType === 2 ? detail.authenticationClubName : '未认证') }}</text>
			</view>
			<view class="desc">
				“{{detail?.signature || '这个人很懒，暂时还没有留下任何介绍'}}
			</view>

      <view class="active-list-wrapper" v-if="userActivityIngList.length > 0">
        <image style="width: 702rpx; height: 276rpx; position:absolute;" src="/static/personal/active-background.png"/>
        <view style="margin-bottom: 10rpx;position: relative;z-index: 99;padding-left: 24rpx; padding-top: 24rpx;">
          <image style="width: 160rpx;height: 40rpx;" mode="widthFix" src="/static/personal/activing-icon.png" />
        </view>
        <u-scroll-list :indicator="false">
          <view class="list-wrapper">
            <view v-for="(item, index) in userActivityIngList" class="item-wrapper" @click.stop="()=>navigateToPack(item.merchantProductVO.id)">
              <image :src="item.merchantProductVO.productPic"/>
              <view class="item-content-wrapper">
                <text class="item-title">{{item.merchantProductVO.productName}}</text>
                <text class="item-desc">点击查看详情</text>
                <view class="item-time-wrapper">
                  <image style="width: 28rpx; height: 28rpx;" src="/static/personal/time-circle-outlined.png"/>
                  <text>{{item.startDate}}</text>
                </view>
              </view>
            </view>

<!--            <view class="item-wrapper">-->
<!--              <image/>-->
<!--              <view class="item-content-wrapper">-->
<!--                <text class="item-title">【洋酒套餐】果味气泡酒</text>-->
<!--                <text class="item-desc">点击内容区域可以查看...</text>-->
<!--                <view class="item-time-wrapper">-->
<!--                  <image style="width: 28rpx; height: 28rpx;" src="/static/personal/time-circle-outlined.png"/>-->
<!--                  <text>2023/10/10</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->

<!--            <view class="item-wrapper">-->
<!--              <image/>-->
<!--              <view class="item-content-wrapper">-->
<!--                <text class="item-title">【洋酒套餐】果味气泡酒</text>-->
<!--                <text class="item-desc">点击内容区域可以查看...</text>-->
<!--                <view class="item-time-wrapper">-->
<!--                  <image style="width: 28rpx; height: 28rpx;" src="/static/personal/time-circle-outlined.png"/>-->
<!--                  <text>2023/10/10</text>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->

          </view>
        </u-scroll-list>
      </view>


      <image style="width: 100%;height: 110rpx;border-radius: 18rpx;" src="https://static.wddzq.com/static/join.png" @click="handleMember"></image>
			
			<view class="option-list">
				<view class="option-item" @click="handleToMyActivity">
					<image src="https://static.wddzq.com/static/wodehuodong.png"></image>
					<text>我的活动</text>
				</view>
				<view class="option-item" @click="handleMyClub">
					<image src="https://static.wddzq.com/static/wodejulebu.png"></image>
					<text>我的俱乐部</text>
				</view>
				<view class="option-item" @click="handleMyWallet">
					<image src="https://static.wddzq.com/static/wodeqianbao.png"></image>
					<text>我的钱包</text>
				</view>
				<view class="option-item" @click="handleOpenGuanFang">
					<image src="https://static.wddzq.com/static/lianxikefu.png"></image>
					<text>联系客服</text>
				</view>
			</view>
			
			<tui-attention type='2'></tui-attention>
			<view style="height: 24rpx;"></view>

			<!-- 我玩过的 -->
			<view class="timeline-box">
				<view class="timeline-tabs">
					<view class="timeline-title" :class="selectedKey === 'comment' ? 'active' : ''" @click="handleTabClick('comment')"><text style="z-index: 100;position: relative;">我的动态</text></view>
					<view class="timeline-title" :class="selectedKey === 'play' ? 'active' : ''" @click="handleTabClick('play')"><text style="z-index: 100;position: relative;">我玩过的</text></view>
				</view>
				<view class="empty" v-if="activityList.length === 0 && selectedKey === 'play'">
					<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
					<view class="empty-text">暂无数据～</view>
				</view>
				<view class="timeline-item" v-if="selectedKey === 'play'" v-for="(item,index) in activityList">
					<view class="timeline-header">
						<text class="timeline-date">{{item.dateDayShow}}</text>
						<tui-image-group :imageList="item.imageList" isGroup distance="-20" borderWidth="2rpx" borderColor="#fff" width="60rpx" height="60rpx"></tui-image-group>
						<text class="timeline-text">和 {{item.signUpCount}} 人一起</text>
					</view>
					<view class="timeline-content" @click="handleApply(item.id)">
						<image class="timeline-img" mode="aspectFill" :src="item.picFirst"></image>
						<view class="timeline-info">
							<view class="timeline-name">{{item.title}}</view>
							<view class="timeline-addr">
								<tui-icon name="gps" size="12" color="#000"></tui-icon>
                <text v-if="item.distanceShow">&nbsp;{{item.distanceShow}}&nbsp;&nbsp;|&nbsp;</text>
                <view>&nbsp;{{item.locationName}}</view>
							</view>
							<view class="timeline-time">
								<tui-icon name="time" size="12" color="#000"></tui-icon>
								<text>&nbsp;{{item.dateShow}}</text>
							</view>
						</view>
					</view>
				</view>
			
				<view class="empty" v-if="dynamicsList.length === 0 && selectedKey === 'comment'">
					<image class="empty-img" src="https://static.wddzq.com/static/kong.png"></image>
					<view class="empty-text">暂无数据～</view>
				</view>
				<view class="community" v-if="selectedKey === 'comment'">
					<view class="community-item" v-for="(item, index) in dynamicsList" :key="item.id">
						<view class="community-header" @click="handleUserClick(item.userId)">
							<view style="position: relative;width: 74rpx;height: 80rpx;display: flex;justify-content: center;">
								<image class="community-img" style="margin-top: 6rpx;" mode="aspectFill" :src="item.userHeadPic" />
								<image v-if="item.vipOrNot" style="position: absolute;top:0;left: 0;width: 74rpx;height: 80rpx;" src="https://static.wddzq.com/static/V3/shequtouxiangkuang.png" />
							</view>
							<view class="community-info">
								<view class="community-name">
									<view :class="item.vipOrNot ? 'vip' : ''">{{item.userNickName}}</view>
				          <image v-if="item.vipOrNot" class="community-tag" src="https://static.wddzq.com/static/V3/aiwanxiaofendui.png" />
				        </view>
								<view class="community-time">{{item.createDate}}</view>
							</view>
						</view>
						<!-- <view class="community-title">浙江杭州亚运会距离开始倒计时：108天</view> -->
						<view class="community-content" @click="handleDetail(item.id)">{{item.content}}</view>
						<view class="community-img-box">
							<image mode="aspectFill" v-for="(it, index) in (item.picListV2?.split('|') || [])" :key="index" :src="it" :class="[0,3,6].includes(index) ? '' : 'ml-8'" :style="{width: imageWidth + 'rpx', height: imageWidth + 'rpx'}" @click="handleImagePreview(item.picListV2, index)" />
						</view>
						<view class="tag-list">
							<view class="tag-item" v-for="(it, index) in (item.tagVoList || [])" :key="index">#{{it.tagName}}</view>
						</view>
						<view class="commit-cell">
							<view class="commit-data">{{item.lookCount}}人浏览</view>
							<view class="commit-opts">
                <view class="commit-opts-item">
                  <image v-if="item.didiOrNot" src="https://static.wddzq.com/static/V3/DD-xuanzhong.png"></image>&nbsp;
                  <image v-else @click="fetchCommitUserDiDi(item.userId, index)" src="https://static.wddzq.com/static/V3/DD-weixuanzhong.png"></image>&nbsp;
                  <text>DD</text>
                </view>
								<view class="commit-opts-item" @click="fetchCommitDynamicGood(item.id, index)">
				          <image v-if="item.goodOrNot" src="https://static.wddzq.com/static/V3/dianzan-xuanzhong.png"></image>&nbsp;
				          <image v-else src="https://static.wddzq.com/static/V3/dianzan-weixuanzhong.png"></image>&nbsp;
									<text>{{item.goodCount}}</text>
								</view>
								<view class="commit-opts-item">
				          <image src="https://static.wddzq.com/static/V3/pinglun.png"></image>&nbsp;
				          <text>{{item.commentCount}}</text>
								</view>
								<view v-if="item.myself" class="commit-opts-item" @click="handleDelete(item.id, index)">
				          <image src="https://static.wddzq.com/static/V3/delete-outlined.png"></image>
				        </view>
							</view>
						</view>
						<input :focus="focusDynamicId === item.id ? focus : false" type="text" confirm-type="评论" :auto-blur="false" :data-id="item.id" :confirm-hold="true" :value="focusDynamicId === item.id ? inputText : ''" @input="handleInput" @blur="handleBlur" @confirm="handleConfirm(item.id)" :placeholder="replyComment ?  '@' + replyComment.commentUserNickName : '点击评价'" style="font-size: 26rpx;color: #999999;border-radius: 18rpx;height: 80rpx;padding: 0 24rpx;background-color: #eee;" placeholder-style="font-size: 26rpx;color: #999999;font-weight: 400;" />
						<view class="comment-list" v-if="item.commentVoList?.length > 0">
							<view class="comment-item" v-for="it in item.commentVoList">
								<text class="comment-item-name" @click="handleCommentClick(it, item.id)">{{it.commentUserNickName}}{{it.replyUserNickName ? ` 回复 ${it.replyUserNickName}` : ''}}: </text>
								<text class="comment-item-text" @click="handleCommentClick(it, item.id)">{{it.commentContent}}</text>
				        <image v-if="it.myself" src="https://static.wddzq.com/static/V3/delete-outlined.png" style="width: 36rpx;height: 36rpx;" @click="handleDeleteCommit(it.id, item.id)" />
				      </view>
						</view>
					</view>
				</view>
			</view>
			
			
			
		</view>
		<tui-ctabbar :current="4"></tui-ctabbar>
	</view>
</template>

<script>
import {
  getUserAssociationActivityPage,
  getUserInfo, getUserVipInfo,
  getMerchantInfo,
  getUserDynamicsPage, commitDynamicComment, getDynamicsDetail, commitUserDiDi, commitDynamicGood,
  deleteDynamic, deleteDynamicComment, getUserActivityIngList
} from '../../config/api.js';
	import { to, uploadAfter, pxToRpx, getSystemInfo, getUserInfoDetail } from '../../config/utils.js';

	export default {
		data() {
			return {
        userVipInfo: {},
				mercheantInfo: {},
				imageList:["/static/detail/team.png","/static/detail/team.png","/static/detail/team.png"],
				detail: {},
        activityList: [],
				current: 0,
				imageWidth: 80,
				
				filterData: {
					pages: 1,
					size: 20,
				},
				loading: false,
				hasMore: true,
				dynamicsList: [],
				// 当前聚焦的输入框所在动态的id
				focusDynamicId: '',
				// 当前回复的某条评论
				replyComment: '',
				// 当前输入框文本
				inputText: '',
				focus: false,
				
				selectedKey: 'comment',
        userActivityIngList: [],
			}
		},
		onShow() {
			let system = getSystemInfo();
			if(system) {
				let screenWidth = pxToRpx(system.screenWidth || 320);
				this.imageWidth = Math.floor((screenWidth - 100 - 16)/3);
			}
			
			this.fetchMerchantInfo();
      this.getUserVipInfo();
			this.fetchUserInfo();
			this.fetchMyJoined();
			this.resetDynamics();
		},
		methods: {
      navigateToPack(productId){
        uni.navigateTo({
          url: `/pages/pack/pack?productId=${productId}`
        })
      },

			handleImagePreview(urls, index) {
				uni.previewImage({
					current: index,
					urls: urls.split('|')
				})
			},
			// 删除动态
			async handleDelete(dynamicId, index) {
				let isDel = await this.showModal();
				if(!isDel) return;
				
				const [err, data] = await to(deleteDynamic({ dynamicId }))
				if(err) {
					return uni.showToast({
						title: err?.msg || '删除动态成功',
						icon: 'none'
					})
				}
				let _dynamicsList = [...this.dynamicsList];
				_dynamicsList.splice(index, 1);
				this.dynamicsList = _dynamicsList;
			},
			async handleDeleteCommit(commentId, dynamicId) {
				let isDel = await this.showModal();
				if(!isDel) return;
				
				const [err, data] = await to(deleteDynamicComment({ commentId }))
				if(err) {
					return uni.showToast({
						title: err?.msg || '删除评论成功',
						icon: 'none'
					})
				}
				this.fetDynamicsDetail(dynamicId);
			},
			showModal() {
				return new Promise(resolve => {
					uni.showModal({
						title: '确认删除？',
						success: function (res) {
							if (res.confirm) {
								resolve(true);
							} else if (res.cancel) {
								resolve(false);
							}
						}
					});
				})
			},
			handleUserClick(userId) {
				uni.navigateTo({
					url: '/pages/personal/personal?userId=' + userId
				})
			},
			handleAttendClick() {
				uni.navigateTo({
					url: '/pages/my-attens/my-attens?userId=' + this.detail.userId
				})
			},
			handleFansClick() {
				uni.navigateTo({
					url: '/pages/my-fans/my-fans?userId=' + this.detail.userId
				})
			},
			handleSwiperChange(e) {
				this.current = e.current;
			},
			handleImgClick(index) {
				this.current = index;
			},
			handleMember() {
				uni.navigateTo({
					url: '/pages/member/member'
				})
			},
      // 获取会员信息
      async getUserVipInfo() {
        const [err, data] = await to(getUserVipInfo());

        if(err) {
          return uni.showToast({
            title: err?.msg || '获取会员信息失败',
            icon: 'none'
          })
        }
        if(data.success) {
          this.userVipInfo = data?.data || {};
        } else {
          uni.showToast({
            title: data?.msg || '获取会员信息失败',
            icon: 'none'
          })
        }

      },
      async fetchMerchantInfo() {
      	const [err, mercheantInfo] = await to(getMerchantInfo());
      	if(err) return;
      	this.mercheantInfo = mercheantInfo?.data || {};
      },
      async fetchUserActivityIngList(userId){
        const [err, response] = await to(getUserActivityIngList({userId: userId}));
        if(err || !response.success){
          return uni.showToast({
            title: err?.msg || '获取信息失败'
          })
        } else {
          console.log('>>>>>>>>>>>userActivityIngList', response.data);
          this.userActivityIngList = response.data;
        }
      },
			handleOpenGuanFang(){
        // 普通客服
        let actionUrl = "https://work.weixin.qq.com/kfid/kfc0c5af571cbb518e3";
        // if (this.userVipInfo?.vipStatus === 2) {
        //   // 会员专属客服
        //   actionUrl = "https://work.weixin.qq.com/kfid/kfcf9f4b153785d6dd5";
        // }
				
        uni.openCustomerServiceChat({
          extInfo: {url: actionUrl},
          corpId: "wwda390ba00d219a0e",
          success(res) {}
        })

      },
			handleToMyActivity() {
				uni.navigateTo({
					url: '/pages/my-active/my-active'
				})
			},
			handleEdit() {
				uni.navigateTo({
					url: '/pages/my-info/my-info'
				})
			},
			handleMyWallet() {
				uni.navigateTo({
					url: '/pages/my-wallet/my-wallet'
				})
			},
			handleMyClub() {
				if(this.mercheantInfo.id) {
					if(this.mercheantInfo.status === 1) {
						return uni.navigateTo({
							url: `/pages/store-into/store-into?step=3`
						})
					}
					uni.navigateTo({
						url: `/pages/shop-info/shop-info`
					})
				} else {
					uni.navigateTo({
						url: '/pages/sett/sett'
					})
				}
			},
			handleNavigateAuth() {
				uni.navigateTo({
					url: '/pages/authentication/authentication'
				})
			},
			// 获取个人主页信息
			async fetchUserInfo() {
				const [err, data] = await to(getUserInfo());
				if(err) {
					return uni.showToast({
						title: err?.msg || '获取个人认证信息失败'
					})
				}
				if(data.success) {
          this.fetchUserActivityIngList(data?.data?.userId);
					this.detail = data?.data || {};
					if (!this.detail.picListV2) {
					  this.detail.picListV2 = "https://static.wddzq.com/static/user_default_pic.png"
          }
				} else {
					return uni.showToast({
						title: data?.msg || '获取个人认证信息失败'
					})
				}
			},
			handleApply(activityId) {
				uni.navigateTo({
					url: `/pages/detail/detail?activityId=${activityId}`
				})
			},
			// 获取我玩过的
			async fetchMyJoined() {
				let userInfo = getUserInfoDetail();
				if(!userInfo) return;
				const [err, data] = await to(getUserAssociationActivityPage({userId: userInfo?.userId}));
				if(err) return;
				if(data.success) {
					this.activityList = (data?.data?.records || []).map(item => {
						item.imageList = item.userSignUpVoList?.map(item => item.headPic) || [];
						return item;
					})
				}
			},
			
			handleDetail(id) {
				uni.navigateTo({
					url: '/pages/commit-detail/commit-detail?id=' + id
				})
			},
			handleCommentClick(replyComment, dynamicId) {
				if(replyComment) {
					this.focus = true;
					
					setTimeout(() => {
						this.replyComment = replyComment;
						this.focusDynamicId = dynamicId;
					}, 300)
				}
			},
			// 评论
			async handleConfirm(dynamicId, replyComment) {
				if(!this.inputText) {
					return uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					})
				}
				
				let params = {
					dynamicId,
					replyCommentId: this.replyComment?.id,
					commentContent: this.inputText
				};
				const [err, data] = await to(commitDynamicComment(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '评论失败',
						icon: 'none'
					})
				}
				
				this.inputText = '';
				this.focusDynamicId = '';
				this.replyComment = '';
				this.fetDynamicsDetail(dynamicId);
				
				uni.showToast({
					title: '评论成功',
					icon: 'none'
				})
			},
			handleInput(e) {
				this.focusDynamicId = e.currentTarget.dataset.id;
				this.inputText = e.detail.value;
			},
			handleBlur() {
				this.focusDynamicId = '';
				this.inputText = '';
				this.replyComment = '';
				this.focus = false;
			},
			// 获取评论详情
			async fetDynamicsDetail(id) {
				let params = {
					dynamicId: id,
				};
				const [err, data] = await to(getDynamicsDetail(params));
				
				if(err) return;
				if(data?.data?.commentVoList) {
					let _dynamicsList = [...this.dynamicsList];
					_dynamicsList.forEach(item => {
						if(item.id === id) {
							item.commentVoList = data?.data?.commentVoList;
						}
					})
				}
			},
			// 重新请求接口
			resetDynamics() {
				let params = {
					...this.filterData,
					pages: 1,
				};
				this.loading = false;
				this.hasMore = true;
				this.fetchDynamicsPage(params, true);
			},
			async fetchDynamicsPage(params, isClear) {
				this.loading = true;
				params.current = params.pages;
				const [err, dynamicsList] = await to(getUserDynamicsPage(params));
				this.loading = false;
				uni.stopPullDownRefresh();
				if(err) return;
				let records = dynamicsList?.data?.records || [];
				
				if(records.length < this.filterData.size) {
					this.hasMore = false;
				}
				this.dynamicsList = isClear ? records : this.dynamicsList.concat(records);
			},
			//点赞
			async fetchCommitDynamicGood(id, index) {
				let params = {
					dynamicId: id
				};
				
				const [err, data] = await to(commitDynamicGood(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || 'DIDI发送失败',
						icon: 'none'
					})
				};
				
				const _dynamicsList = [...this.dynamicsList];
				if(_dynamicsList[index].goodOrNot) {
					_dynamicsList[index].goodCount = (_dynamicsList[index].goodCount || 0) - 1;
				} else {
					_dynamicsList[index].goodCount = (_dynamicsList[index].goodCount || 0) + 1;
				}
				_dynamicsList[index].goodOrNot = !_dynamicsList[index].goodOrNot;
				this._dynamicsList = _dynamicsList;
				
			},
			// 发送DIDI
			async fetchCommitUserDiDi(userId) {
				let params = {
					userId: userId
				};
				
				const [err, data] = await to(commitUserDiDi(params));
				
				if(err) {
					return uni.showToast({
						title: err?.msg || '操作失败'
					})
				};
				
				uni.showToast({
					title: data?.data || '发送成功',
					icon: 'none'
				})
			},
			handleTabClick(key) {
				this.selectedKey = key;
			},
			
		}
	}
</script>

<style lang="scss">
.active-list-wrapper{
  width: 702rpx;
  height: 276rpx;
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 16rpx;
}
.list-wrapper{
  display: flex;
  padding-left: 16rpx;
}
.item-wrapper{
  width: 474rpx;
  border-radius: 18rpx;
  background: #fff;
  display: flex;
  margin-right: 16rpx;
  padding: 16rpx;
}
.item-wrapper image{
  width: 140rpx;
  height: 140rpx;
  border-radius: 16rpx;
  margin-right: 16rpx;
}
.item-content-wrapper{
  height: 140rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-title{
  font-size: 26rpx;
  font-weight: bold;
  color: #333333;
}
.item-desc{
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
}
.item-time-wrapper{
  display: flex;
  align-items: center;
}
.item-time-wrapper text{
  font-size: 24rpx;
  font-weight: 400;
  color: #666666;
}

.bg{
	position: relative;
	
	.user-info-box{
		position: absolute;
		left: 0%;
		bottom: 26rpx;
		padding: 28rpx;
		.thunmb-image{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-bottom: 30rpx;
			.icon-plus{
				display: inline-block;
				background-color: #EAEAEA;
				margin-left: 14rpx;
				border-radius: 14rpx;
				width: 76rpx;
				height: 76rpx;
				padding: 18rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				box-sizing: border-box;
			}
		}
		.user-info{
			padding: 0 28rpx;
			background: rgba(255, 255, 255, 0.5);
			border-radius: 20rpx;
			.info-top{
				position: relative;
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				// padding:  24rpx 0;
				.header-image{
					position: relative;
					width: 113rpx;
					height: 113rpx;
					.img{
						transform: scale(1.1);
					}
				}
				.info-top-right{
					position: relative;
					flex: 1;
					padding: 16rpx 16rpx 16rpx 36rpx;
					.info-name{
						position: relative;
						
						padding: 0 15rpx;
						display: flex;
						align-items: center;
						justify-content: flex-start;
						.name{
							flex: 1;
							color: #383938;
							font-size: 38rpx;
							font-weight: 500;
						}
						.setting{
							display: flex;
							align-items: center;
							justify-content: center;
							position: absolute;
							right: -50rpx;
							top: 0;
							padding: 8rpx 16rpx;
							border-radius: 36rpx 0px 0px 36rpx;
							background: #CFE5E7;
							.setting-icon{
								.icon{
									
								}
							}
							.setting-txt{
								color: #505050;
								font-size: 28rpx;
								padding-left: 16rpx;
							}
						}
					}
					.info-list{
						position: relative;
						display: flex;
						.list-item{
							position: relative;
							color: #5A5A5A;
							font-size: 28rpx;
							padding: 15rpx;
							.num{
								color: #000000;
							}
						}
					}
				}
			}
			.info-bottom{
				position: relative;
				display: flex;
				flex-wrap: wrap;
				padding-top: 7rpx;
				.info-tag{
					position: relative;
					.tag-img{
						position: relative;
						width: 142rpx;
						height: 36rpx;
					}
				}
				.info-bottom-item{
					color: #3B3B3B;
					font-size: 24rpx;
					
					.item-content{
						display: flex;
						align-items: center;
						background-color: #fff;
						border-radius: 25rpx;
						.icon-img{
							position: relative;
							display: inline-block;
							width: 20rpx;
							height: 20rpx;
						}
					}
					.padding{
						padding: 6rpx 11rpx;
						margin: 16rpx 8rpx;
					}
					
				}
				.flex-1{
					flex: 1;
					text-align: right;
					.item-content{
						display: inline-block;
					}
				}
				.padding{
					padding: 6rpx 11rpx;
					margin: 16rpx 8rpx;
				}
				
			}
		}
	}
	
}

.info-container {
	background-color: #fff;
	margin-top: -34rpx;
	position: relative;
	z-index: 999;
	border-top-left-radius: 18rpx;
	border-top-right-radius: 18rpx;
	padding: 48rpx 24rpx;
	.info-list{
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.grid-item{
			position: relative;
			flex: 1;
			.item-content{
				padding: 18rpx 22rpx;
				border-radius: 30rpx;
				.grid-txt{
					position: relative;
					color: #6A6A6A;
					font-size: 28rpx;
					margin-bottom: 12rpx;
					.grid-num{
						position: relative;
						color: #000000;
						font-size: 36rpx;
						font-weight: 500;
					}
				}
				.grid-btn{
					position: relative;
					display: flex;
					text-align: center;
					align-items: center;
					justify-content: center;
					.btn-txt{
						position: relative;
						padding: 8rpx 44rpx;
						font-size: 24rpx;
						border-radius: 14rpx;
					}
					.btn-bg1{
						background: #E6F6F8;
						color: #64D2D8;
					}
					.btn-bg2{
						color: #6A6A6A;
						background: linear-gradient(180deg, #DCEFFD 0%, #F7FBFF 100%);
					}
					.btn-bg3{
						color: #6A6A6A;
						background: linear-gradient(180deg, #E6F0FE 0%, #F7F9FE 100%);
					}
				}
			}
			
		}
		
		.grid-item:nth-child(1)>.item-content{
			background: linear-gradient(180deg, #EAF6F7 0%, #FAFDFE 100%);
		}
		.grid-item:nth-child(2)>.item-content{
			background: linear-gradient(180deg, #DCEFFD 0%, #F7FBFF 100%);
		}
		.grid-item:nth-child(3)>.item-content{
			background: linear-gradient(180deg, #E6F0FE 0%, #F7F9FE 100%);
		}
		.grid-item:nth-child(2){
			margin: 0 14rpx;
		}
	}
	
	.club-box{
		position: relative;
		padding: 16rpx 0;
		.club-btn{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 16rpx 22rpx;
			background: #212121;
			border-radius: 30rpx;
			.club-txt{
				position: relative;
				flex: 1;
				color: #FFFFFF;
				font-size: 32rpx;
				font-weight: 500;
				text-align: center;
			}
			.club-btn-txt{
				position: relative;
				padding: 4rpx 16rpx ;
				color: #EC683E;
				font-size: 24rpx;
				background: #FAEDD6;
				border-radius: 20rpx;
			}
		}
	}
	.club-detail{
		position: relative;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 32rpx 26rpx;
		box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.3);
		.club-header{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-bottom: 22rpx;
			.club-title{
				flex: 1;
				color: #000000;
				font-size: 30rpx;
				font-weight: 600;
			}
			.club-txt{
				position: relative;
				color: #8D8D8D;
				font-size: 24rpx;
			}
			.club-btn-icon{
				position: relative;
			}
		}
		.club-info{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding-bottom: 24rpx;
			.club-img{
				position: relative;
				width: 80rpx;
				height: 80rpx;
			}
			.club-content{
				position: relative;
				flex: 1;
				padding-left: 16rpx;
				.name{
					position: relative;
					color: #000000;
					font-size: 28rpx;
					font-weight: 500;
				}
				.tips{
					color: #666363;
					font-size: 24rpx;
				}
			}
		}
		.club-bottom{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 8rpx 18rpx;
			border-radius: 30rpx;
			background: linear-gradient(90deg, #CBF1F6 0%, #F5FDFE 100%);
			
			.club-tip-txt{
				position: relative;
				font-size: 24rpx;
				color: #666363;
				flex: 1;
			}
			.club-bottom-btn{
				position: relative;
				.club-bottom-btn-txt{
					position: relative;
					padding: 4rpx 16rpx;
					background: #212121;
					border-radius: 30rpx;
					color: #64D2D8;
					font-size: 24rpx;
				}
			}
		}
	}
	
	.teach{
		position: relative;
		border-radius: 30rpx;
		background: linear-gradient(90deg, #D6F8FE 0%, #E4F6FC 98%);
		padding: 20rpx 0;
		padding-left: 44rpx;
		margin-top: 22rpx;
		.teach-title{
			position: relative;
			color: #000000;
			font-size: 36rpx;
			font-weight: 500;
		}
		.teach-tips{
			color: #6A6A6A;
			font-size: 24rpx;
		}
	}
	
}

.image-thunmbs {
	position: absolute;
	top: -100rpx;
	left: 0;
}
.image-thunmbs image {
	/*width: 92rpx;*/
	/*height: 92rpx;*/
  width: 60rpx;
  height: 60rpx;
	border-radius: 18rpx;
	margin-left: 24rpx;
}
.image-thunmbs image.active {
	border: 4rpx solid #fff;
}

.info-box {
	display: flex;
	align-items: center;
}
.info-name {
	font-size: 36rpx;
	color: #333;
	margin-right: 14rpx;
}

.info-name.vip {
	color: #FF6F0A;
}
.community-tag {
	width: 143rpx;
	height: 44rpx;
	margin-left: 12rpx;
}
.info-box image {
	/* width: 27rpx; */
	/* height: 27rpx; */
}

.info-right {
	flex: 1;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.info-right text {
	font-size: 28rpx;
	color: #666;
	margin-right: 14rpx;
}

.info-auth {
	margin-top: 10rpx;
	display: flex;
	align-items: center;
}
.info-auth image {
	width: 32rpx;
	height: 32rpx;
	margin-right: 8rpx;
}
.info-auth text {
	font-size: 24rpx;
	color: #333;
}

.info-data {
	display: flex;
	align-items: center;
	margin: 20rpx 0 26rpx 0;
}
.info-data-item {
	margin-right: 40rpx;
}
.info-data-item .info-data-number {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
}
.info-data-item .info-data-text {
	height: 36rpx;
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
	padding-left: 8rpx;
}

.desc {
	font-size: 28rpx;
	color: #333;
	padding: 30rpx 26rpx;
	background-color: #eee;
	border-radius: 18rpx;
	margin-top: 30rpx;
	margin-bottom: 48rpx;
}

.option-list {
	display: flex;
	margin-bottom: 42rpx;
	height: 146rpx;
	border-radius: 18rpx;
	box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,.05);
}
.option-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
.option-item image {
	width: 50rpx;
	height: 50rpx;
	margin-bottom: 18rpx;
}
.option-item text {
	font-size: 28rpx;
	color: #000;
}

/* 时间轴 */
.timeline-box {
	padding: 24rpx;
	border-radius: 18rpx;
	box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,.05);
}
.timeline-tabs {
	display: flex;
	align-items: center;
}
.timeline-title {
	font-size: 28rpx;
	color: #000;
	margin-top: 44rpx;
	margin-bottom: 38rpx;
	font-weight: bold;
	position: relative;
	margin-right: 34rpx;
	z-index: 2;
}
.timeline-title.active::before {
	position: absolute;
	content: ' ';
	bottom: 0;
	left: 0;
	width: 100%;
	height: 12rpx;
	background: #FFB803;
	z-index: 99;
}
.timeline-header {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}
.timeline-date {
	font-size: 28rpx;
	color: #333;
	margin-right: 24rpx;
}
.timeline-text {
	font-size: 24rpx;
	color: #aaa;
	margin-left: 12rpx;
}

.timeline-item:last-child .timeline-content {
	border-left: 0rpx solid #ddd;
}

.timeline-content {
	/* display: flex; */
	border-left: 2rpx solid #ddd;
	padding-left: 24rpx;
	padding-top: 14rpx;
	padding-bottom: 50rpx;
	margin-left: 10rpx;
	position: relative;
}
.timeline-img {
	width: 200rpx;
	height: 200rpx;
	border-radius: 20rpx;
	position: absolute;
	top: 0;
	left: 20rpx;
}

.timeline-info {
	margin-left: 218rpx;
	flex: 1;
}
.timeline-name {
	font-size: 32rpx;
	color: #000;
	margin-bottom: 22rpx;
}

.timeline-addr, .timeline-time {
	font-size: 24rpx;
	color: #666;
	display: flex;
	align-items: center;
	margin-bottom: 22rpx;
}

.timeline-addr {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.empty {
	display: flex;
	align-items: center;
	flex-direction: column;
}
.empty-img {
	width: 150rpx;
	height: 150rpx;
	margin-top: 50rpx;
	margin-bottom: 26rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #666;
}


/* 动态 */
.community {
	/* padding: 0 24rpx; */
}
.community-item {
	background: #FFFFFF;
	border-radius: 18rpx;
	padding: 0 0 32rpx 0;
	border-bottom: 1rpx solid #f2f2f2;
}
.community-item .community-header {
	display: flex;
	align-items: center;
}

.community-header .community-img {
	width: 66rpx;
	height: 66rpx;
	border-radius: 40rpx;
}
.community-header .community-info {
	margin-left: 10rpx;
}

.community-info .community-name {
	display: flex;
	height: 42rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: #333333;
	line-height: 42rpx;
}
.community-info .community-name view {
	margin-right: 8rpx;
}

.community-info .community-name view.vip {
	color: #FF6F0A;
}
.community-info .community-name .community-tag {
	width: 143rpx;
	height: 44rpx;
}

.community-info .community-time {
	height: 30rpx;
	font-size: 22rpx;
	font-weight: 400;
	color: #999999;
	line-height: 30rpx;
}

.community-title {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 500;
	color: #333333;
	line-height: 36rpx;
	margin-top: 16rpx;
	margin-bottom: 8rpx;

}
.community-content {
	font-size: 28rpx;
	font-weight: 400;
	color: #666666;
	line-height: 36rpx;
	margin-bottom: 16rpx;
	margin-top: 20rpx;
}
.community-img-box {
	display: flex;
	flex-wrap: wrap;
}
.community-img-box image {
	height: 210rpx;
	border-radius: 18rpx;
	margin-bottom: 8rpx;
}

.tag-list {
	margin: 24rpx 0;
	display: flex;
	flex-wrap: wrap;
}
.tag-item {
	height: 48rpx;
	background: #F7F7F7;
	border-radius: 24rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 16rpx;
	margin-bottom: 10rpx;
	
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding: 0 16rpx;
}

.commit-cell {
	display: flex;
	align-items: center;
	margin-bottom: 25rpx;
}
.commit-cell .commit-data {
	height: 34rpx;
	font-size: 26rpx;
	font-weight: 400;
	color: #999999;
	line-height: 34rpx;
}
.commit-cell .commit-opts {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.commit-opts .commit-opts-item {
	display: flex;
	align-items: center;
	margin-left: 40rpx;
}
.commit-opts-item image {
	width: 32rpx;
	height: 32rpx;
}
.commit-opts-item text {
	height: 36rpx;
	font-size: 28rpx;
	font-weight: 400;
	color: #999999;
	line-height: 36rpx;
}

.comment-list {
	background-color: #f2f2f2;
	border-radius: 18rpx;
	padding: 20rpx;
	margin-top: 25rpx;
}
.comment-list .comment-item {
	display: flex;
	align-items: center;
	margin-bottom: 15rpx;
}
.comment-item .comment-item-name {
	font-size: 28rpx;
	color: #999;
}
.comment-item .comment-item-text {
	font-size: 28rpx;
	color: #333;
	flex: 1;
	padding: 0 12rpx;
}

.ml-8 {
	margin-left: 8rpx;
}

</style>
